<template>
  <div id="invest">
    <!-- end  -->
    <div class="invest_con_wper">
      <div class="invest_con px1000">
        <div class="product_choose">
          <h2 class="product_tit clearfix">
            <em class="proall fl">全部理财产品</em>
            <div class="clearfix fl">
              <span class="product_curspan"><img src="../assets/images/invest_pic01.png"> 新手体验标</span>
            </div>

          </h2>
          <div class="product_box">
            <div class="product_list">
              <div class="invest_prochoose">
                <p><a href="javascript:void(0)">项目期限：</a><a href="javascript:void(0)"
                                                            @click="changeDeadLine(0)">不限</a><a
                  href="javascript:void(0)" @click="changeDeadLine(1)">小于1个月</a><a href="javascript:void(0)"
                                                                                   @click="changeDeadLine(2)">1-3个月</a><a
                  href="javascript:void(0)" @click="changeDeadLine(3)">4-6个月</a><a href="javascript:void(0)"
                                                                                   @click="changeDeadLine(4)">7-12个月</a>
                </p>
                <p><a href="javascript:void(0)">项目状态：</a><a href="javascript:void(0)" @click="changeStatus(0)">不限</a><a
                  href="javascript:void(0)" @click="changeStatus(1)">正在招标的借款</a><a href="javascript:void(0)"
                                                                                   @click="changeStatus(2)">已成功借款</a><a
                  href="javascript:void(0)" @click="changeStatus(3)">已完成借款</a></p>
                <p><a href="javascript:void(0)">项目收益：</a><a href="javascript:void(0)"
                                                            @click="changeGetYearMoney(0)">不限</a><a
                  href="javascript:void(0)" @click="changeGetYearMoney(1)">10%以下</a><a href="javascript:void(0)"
                                                                                       @click="changeGetYearMoney(2)">10%-15%</a><a
                  href="javascript:void(0)" @click="changeGetYearMoney(3)">15%-20%</a><a href="javascript:void(0)"
                                                                                         @click="changeGetYearMoney(4)">20%-30%</a>
                </p>
                <p><a href="javascript:void(0)">项目类型：</a><a href="javascript:void(0)" @click="changeTypeId(0)">不限</a><a
                  href="javascript:void(0)" @click="changeTypeId(1)">信用标</a><a href="javascript:void(0)"
                                                                               @click="changeTypeId(2)">抵押标</a><a
                  href="javascript:void(0)" @click="changeTypeId(3)">飞鸽标</a><a href="javascript:void(0)" @click="changeTypeId(4)">债务标</a></p>
              </div>
            </div>
            <!--  -->
            <div class="product_list" style="display:none;">
              2
            </div>
            <!--  -->
            <div class="product_list" style="display:none;">
              3
            </div>
            <!--  -->

          </div>
        </div>
        <!-- end block -->
        <h3 class="sort_tit mt30"><em>排序</em>
          <span @click="clearOrders()">清除排序</span>
          <span @click="changeINVEST_GETYEARMONEY()">收益率<img src="../assets/images/invest_jiantou.png" alt=""></span>
          <span @click="changeINVEST_RELEASETIME()">发布时间<img src="../assets/images/invest_jiantou.png" alt=""></span>
          <span @click="changeINVEST_DEADLINE()">项目期限<img v-if="" src="../assets/images/invest_jiantou.png" alt=""></span>
        </h3>
        <div class="product_list mt20">

          <div v-for="invest in data.list" class="prolist_one prolist_one_bl01 mt20">
            <h2 class="prolist_one_tit"><span>抵押</span>{{invest.investName}}
            </h2>
            <ul class="prolist_one_ul clearfix">
              <li>
                年华收益：<strong>{{invest.investGetYearMoney}}%</strong><br>
                还款方式：{{invest.repayName}}
              </li>
              <li>
                剩余期限：<i>{{invest.remainderTime}}</i>天<br>
                保障机构：{{invest.stafguardName}}
              </li>
              <li class="prolist_press">
                募集金额：<strong>{{invest.investAmount}}</strong> 元 <br>
                认购进度：
                <el-progress type="dashboard" :percentage="parseInt(invest.investSubscribe)"
                             :color="colors"></el-progress>
              </li>
              <li class="prolist_btn">
                <a href="javascript: void(0)" class="pro_btn" @click="searchById(invest.investId)">立即投资</a>
              </li>
            </ul>
          </div>
          <!-- end one -->
          <!-- pagelink -->
          <div style="margin: 0 auto;text-align: center" >
            <el-button-group>
              <el-button type="primary" icon="el-icon-arrow-left" @click="changePageNum(data.prePage)">上一页</el-button>
              <el-button type="primary" @click="changePageNum(data.nextPage)">下一页<i class="el-icon-arrow-right el-icon--right" ></i></el-button>
            </el-button-group>
          </div>

          <!--         pagelink end -->
        </div>
      </div>
    </div>
  </div>
</template>


<script>
  import bus from "../assets/eventBus"

  export default {
    name: "invest",
    data() {
      return {
        percentage: 10,
        colors: [
          {color: '#f56c6c', percentage: 20},
          {color: '#e6a23c', percentage: 40},
          {color: '#5cb87a', percentage: 60},
          {color: '#1989fa', percentage: 80},
          {color: '#6f7ad3', percentage: 100}
        ],
        condition: {
          pageNum: 1,
          typeId: '',
          deadLineMin: '',
          deadLineMax: '',
          statusId: '',
          getYearMoneyMin: '',
          getYearMoneyMax: '',
          orders: {
            INVEST_DEADLINE: '',
            INVEST_RELEASETIME: '',
            INVEST_GETYEARMONEY: ''
          }
        },
        data:{
          endRow: '',
          hasNextPage: '',
          hasPreviousPage: '',
          isFirstPage: '',
          isLastPage: '',
          list: [],
          navigateFirstPage: 1,
          navigateLastPage: 2,
          navigatePages: 8,
          navigatepageNums: [],
          nextPage: '',
          pageNum: '',
          pageSize: '',
          pages: '',
          prePage: '',
          size: '',
          startRow: '',
          total: '',
        },
      };

    },

    created() {
      this.axios.post("/api/invest/searchAll", {})
        .then((data) => {
          this.data = data.data;
        })
    },

    methods: {
      changePageNum(i) {
        this.condition.pageNum = i
        this.searchByCondition()
      },
      changeStatus(i) {
        switch (i) {
          case 0:
            this.condition.statusId = ''
            break
          default:
            this.condition.statusId = i
            break
        }
        this.searchByCondition()
      },

      changeTypeId(i) {
        switch (i) {
          case 0:
            this.condition.typeId = ''
            break
          default :
            this.condition.typeId = i
            break
        }
        this.searchByCondition()
      },

      changeGetYearMoney(i) {
        switch (i) {
          case 0:
            this.condition.getYearMoneyMin = ''
            this.condition.getYearMoneyMax = ''
            break
          case 1:
            this.condition.getYearMoneyMin = ''
            this.condition.getYearMoneyMax = 10
            break
          case 2:
            this.condition.getYearMoneyMin = 10
            this.condition.getYearMoneyMax = 15
            break
          case 3:
            this.condition.getYearMoneyMin = 15
            this.condition.getYearMoneyMax = 20
            break
          case 4:
            this.condition.getYearMoneyMin = 20
            this.condition.getYearMoneyMax = ''
            break
        }
        this.searchByCondition()
      },
      changeDeadLine(i) {
        switch (i) {
          case 0:
            this.condition.deadLineMin = ''
            this.condition.deadLineMax = ''
            break
          case 1:
            this.condition.deadLineMin = ''
            this.condition.deadLineMax = 30
            break
          case 2:
            this.condition.deadLineMin = 30
            this.condition.deadLineMax = 90
            break
          case 3:
            this.condition.deadLineMin = 120
            this.condition.deadLineMax = 180
            break
          case 4:
            this.condition.deadLineMin = 210
            this.condition.deadLineMax = 360
            break
        }
        this.searchByCondition()
      },
      changeINVEST_DEADLINE() {
        let isDesc = this.condition.orders.INVEST_DEADLINE == null ? true : this.condition.orders.INVEST_DEADLINE;
        if (this.condition.orders.INVEST_DEADLINE != null) {
          delete this.condition.orders.INVEST_DEADLINE
        }
        this.condition.orders.INVEST_DEADLINE = !isDesc
        this.searchByCondition()
      },
      changeINVEST_RELEASETIME() {
        let isDesc = this.condition.orders.INVEST_RELEASETIME == null ? true : this.condition.orders.INVEST_RELEASETIME;
        if (this.condition.orders.INVEST_RELEASETIME != null) {
          delete this.condition.orders.INVEST_RELEASETIME
        }
        this.condition.orders.INVEST_RELEASETIME = !isDesc
        this.searchByCondition()
      },
      changeINVEST_GETYEARMONEY() {
        let isDesc = this.condition.orders.INVEST_GETYEARMONEY == null ? true : this.condition.orders.INVEST_GETYEARMONEY;
        if (this.condition.orders.INVEST_GETYEARMONEY != null) {
          delete this.condition.orders.INVEST_GETYEARMONEY
        }
        this.condition.orders.INVEST_GETYEARMONEY = !isDesc
        this.searchByCondition()
      },
      clearOrders() {
        this.condition.orders = {}
        this.searchByCondition()
      },

      searchByCondition() {
        this.axios.post("/api/invest/searchAll", this.condition)
          .then((data) => {
            this.data = data.data;
          })
      },
      searchById(id) {
        localStorage.investId = id;
        this.$emit("func", "detail")
      }
    }
  }
</script>

<style scoped>
</style>
